<!--
 * @Descripttion: 资源产品信息-首图维护控件
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-11 16:24:04
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-19 13:58:31
-->

<template>
  <div class="picture">
    <el-upload
      class="avatar-uploader"
      :class="{disabled: uploadDisabled}"
      :auto-upload="false"
      :limit="1"
      list-type="picture-card"
      action="https://jsonplaceholder.typicode.com/posts/"
      :file-list="imageList"
      :show-file-list="true"
      :on-success="handleAvatarSuccess"
      :on-remove="handleRemove"
      :before-upload="beforeAvatarUpload"
    >
      <img
        v-if="imageUrl"
        :src="imageUrl"
        class="avatar"
      >
      <i class="el-icon-plus avatar-uploader-icon" />
      <button class="upload">点击指定首图</button>
    </el-upload>
  </div>
</template>
  
<script lang="ts">
import { defineComponent, reactive, toRefs, computed, onMounted, watch } from 'vue'

export default defineComponent ({
  setup() {
    const methods = reactive({
      imageUrl: '',
      imageList: [],
      handleAvatarSuccess(res: any, file: any) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file: any) {
        console.log(file)
      },
      handleRemove(file: any) {
        console.log(file)
      }
    })
    const uploadDisabled = computed(() => {
      return methods.imageList.length > 0
    })

    watch(() => methods.imageList.length, (newValue) => {
      console.log('imageList', newValue)
    })

    onMounted(() => {
      console.log('test', methods.imageList.length)
    }) 

    return {
      uploadDisabled,
      ...toRefs(methods)
    }
  }
})
</script>
  
<style lang="scss" scoped>
.picture {
  position: relative;
  .upload {
    position: absolute;
    top: 155px;
    left: 0;
    border: none;
    background-color: #fff;
    color: deepskyblue;
  }
}
.disabled{
  :deep .el-upload--picture-card {
    display: none;
  }
  .el-upload--picture-card {
    display: none;
  }
}
</style>
<style>
.disabled .el-upload--picture-card {
  display: none;
}
</style>
